<template>
  <view class="adopted-cat">
    <card-title title="被爱供养的猫咪" />
    <scroll-view
      :scroll-x="true"
      :scroll-y="false">
      <view class="flex cart-list">
        <block
          v-for="(item) in list"
          :key="item.petId">
          <view
            class="cat-item tap-active"
            @click="toDetail(item)">
            <u--image
              class="cat-item--area"
              height="32rpx"
              width="auto"
              :src="item.inAdoptPic"
              mode="heightFix"></u--image>
            <maya-image
              class="cart-img"
              width="100%"
              height="100px"
              radius="16rpx"
              :src="item.petAvatar"
              mode="aspectFill"></maya-image>
            <view class="flex align-center cart-info fz-10">
              <view class="cat-item--name u-line-1">{{ item.petName }}</view>
              <text>供养人</text>
              <u--image
                :src="item.userAvatar"
                width="32rpx"
                class="user-avatar"
                height="32rpx"
                shape="circle"></u--image>
              <text>{{ item.signName }}</text>
            </view>
            </maya-image></view>
        </block>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import cardTitle from './card-title.vue';
import { getHomeAdoptedCatList } from '@/api/pet-core.js';
import { mapGetters } from 'vuex';
// 被爱认养的猫咪
export default {
  name: 'AdoptedCat',
  components: {
    cardTitle,
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getList();
    uni.$on('adoptSuccess', () => {
      this.getList();
    });
  },
  computed: {
    ...mapGetters(['token']),
  },
  watch: {
    token() {
      this.getList();
    },
  },
  beforeDestroy() {
    uni.$off('adoptSuccess');
  },
  methods: {
    async getList() {
      try {
        const { data } = await getHomeAdoptedCatList();
        this.list = data;
      } catch (e) {
        //TODO handle the exception
        throw new Error(e);
      }
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/index?&id=${item.petId}`,
      });
    },
  },
};
</script>

<style lang="scss">
	.adopted-cat{
		padding-top: $pd;
		.cart-list{
			flex-wrap: nowrap;
		}
		.cat-item{
			width: 100px;
			flex-shrink: 0;
			margin-right: $pd;
			border-radius: $border-radius;
			overflow:hidden;
			background-color: white;
			position: relative;
			.cart-info{
				padding: 10rpx;
				flex-wrap: nowrap;
				position: relative;
				text{
					flex-shrink: 0;
				}
			}
			&--name{
				position: absolute;
				top: -40rpx;
				border-radius: $border-radius;
				background-color: rgba(0,0,0,0.26);
				color: white;
				padding: 2rpx 12rpx;
			}
			&--area{
				position: absolute;
				z-index: 1;
				left: 50%;
				top: -1px;
				transform: translateX(-50%);
			}
			.user-avatar{
				margin: 0 4rpx;
			}
		}
	}
</style>
